<template>
  <div class="login">
    <div class="form-wap">
      <el-form
        label-position="top"
        label-width="80px"
        type="flex"
        :model="config.formem"
        :rules="config.rules"
      >
        <el-form-item label="用戶名" prop="username">
          <el-input type="text" v-model="config.formem.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="config.formem.password"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="passwords">
          <el-input
            type="password"
            v-model="config.formem.passwords"
          ></el-input>
        </el-form-item>
        <el-form-item label="验证码">
          <el-row>
            <el-col :span="15">
              <el-input type="number" v-model="config.formem.code"></el-input>
            </el-col>
            <el-col :span="9" class="el-keekbotton">
              <el-button type="primary" v-if="config.isShowGetCode" @click="hq"
                >获取验证码</el-button
              >
              <el-button v-else>剩余{{ config.count }}秒</el-button>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item>
          <Captch></Captch>
        </el-form-item>
        <el-form-item class="el-keekbotton">
          <el-button type="primary" @click="add">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  {{$t('header_menu.logout')}}
  </div>
</template>
<script>
import { reactive, onBeforeUnmount,getCurrentInstance} from "vue";
import { useI18n } from 'vue-i18n'
import Captch from "../../components/Captcha.vue";

export default {
  name: "login",
  components: { Captch},
  setup(props,context) {
    //滑动验证功能
    // let { oncack, obj } = fu();
    //表单功能
  let {locale} = useI18n({useScope:'global'})
  // proxy相当于vue2.x中的this用于指向上下文
   const {proxy} = getCurrentInstance()  
  
    // let { formfn } = use();
    // let { config, add ,hq} = formfn();
    var validatePass2 = (rule, value, callback) => {
      if (value !== config.formem.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    //表单数据
    let config = reactive({
      formem: {
        username: "sssss",
        password: "",
        passwords: "",
        code: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        passwords: [
          { validator: validatePass2, trigger: "blur" },
          { required: true, message: "请再次输入密码", trigger: "blur" },
        ],
      },
      count: 60,
      isShowGetCode: true,
      timer: null,
    });
    //定时器操作
    const hq = () => {
    
      clearInterval(config.timer);
      config.isShowGetCode = false;
      config.timer = setInterval(() => {
        config.count--;
        if (config.count === 0) {
          clearInterval(config.timer);
          config.count = 60;
          config.isShowGetCode = true;
        }
      }, 1000);
    };
    //清除定时器
    onBeforeUnmount(() => {
      clearInterval(config.timer);
    });

   const add =(()=>{
    //  proxy.$Message.success('测试弹框')
    // proxy.$http.yanzm().then(res=>{
    //   console.log(res)
    // })
    //  locale.value = 'en'
   })




    return { config, hq, onBeforeUnmount ,add};
  },
};
//提交表单 & 表单数据等函数方法
// function use() {
//   function formfn() {

//     //获取验证码开启定时器
//     function hq() {
//         clearInterval(config.timer);
//          config.isShowGetCode = false;
//          config.timer = setInterval(() => {
//             config.count--;
//             if (config.count === 0) {
//               clearInterval(config.timer);
//               config.count = 60;
//               config.isShowGetCode = true;
//             }
//           }, 1000);
//     }
//     function add() {
//       console.log(config);
//     }
//     return { config, add ,hq};
//   }

//   return { formfn };
// }
</script>

<style  lang="less">
@import "./style.less";
</style>